<template>
  <section class="component modify-message-template">
    <el-form :model="messageModel" :rules="rules" ref="form" inline label-width="120px" class="text-left">
      <el-row>
        <el-col :span="24">
          <el-form-item label="设为默认模板:" prop="isDefault">
            <el-checkbox v-model="messageModel.isDefault" true-label="YES" false-label="NO"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="模板编号:" prop="templateCode">
        <el-input :disabled="selectedRow?true:false" v-model="messageModel.templateCode" clearable></el-input>
      </el-form-item>
      <el-form-item label="模板名称:" prop="templateName">
        <el-input v-model="messageModel.templateName" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="templateStatus">
        <el-select v-model="messageModel.templateStatus">
          <el-option v-for="{code,name,index} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板参数说明">
        <span class="readme"> 客户姓名：${personal_name} 逾期天数：${overdue_days} 还款金额：${overdue_amount}</span>
      </el-form-item>
      <el-form-item label="短信内容: " prop="templateContent">
        <el-input class="template-content" type="textarea" v-model="messageModel.templateContent" :autosize="{ minRows: 3}" :maxlength="500" show-word-limit></el-input>
        <p class="readme">提示：短信内容不超过500个字符，其中包括标点符合或空格等！</p>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { TemplateService } from "~/services/domain-service/template.service";
import { State, Action, Getter } from "vuex-class";
import { Emit, Prop } from "vue-property-decorator";
import { Form } from "element-ui";
import { CommonService } from "~/utils/common.service";
@Component({
  components: {}
})
export default class ModifyMessageTemplete extends Vue {

  @Dependencies(TemplateService) private templateService: TemplateService;

  @Prop()
  private selectedRow: any

  private messageModel: any = {
    templateCode: "", // 模版编号
    templateName: "", // 模版名称
    templateStatus: "ENABLED", // 模版状态
    templateContent: "", // 模版内容
    templateCategory: "MESSAGE",
    isDefault: "NO",
  }

  private rules: any = {
    templateCode: { required: true, message: "请输入模板编号" },
    templateName: { required: true, message: "请输入模板名称" },
    templateStatus: { required: true, message: '请选择模板状态' },
    templateContent: { required: true, message: '请输入短信内容' }
  }

  public refresh() {
    if (!this.selectedRow) {
      const templateForm = this.$refs["form"] as Form
      templateForm.resetFields()
      this.messageModel.id = ''
    } else {
      this.messageModel.templateCode = this.selectedRow.templateCode
      this.messageModel.templateName = this.selectedRow.templateName
      this.messageModel.templateStatus = this.selectedRow.templateStatus
      this.messageModel.isDefault = this.selectedRow.isDefault
      this.messageModel.templateContent = this.selectedRow.templateContent
      this.messageModel.id = this.selectedRow.id
    }
  }

  @Emit('refreshData')
  private refreshData() { }
  @Emit('close')
  private close() {
  }

  /**
   * 提交新建模板按钮
   */
  private commit(type) {
    const templateForm = this.$refs["form"] as Form;
    templateForm.validate(validate => {
      if (!validate) return;
      this.templateService.createTemplate(this.messageModel).subscribe(
        () => {
          this.refreshData()
          this.close()
          templateForm.resetFields()
          this.$message.success('操作成功')
        }
      )
    });
  }

}
</script>
<style lang="less" scoped>
.component.modify-message-template {
  .readme {
    color: #ff3122;
  }

  .btns {
    text-align: center;
  }
  .template-content {
    width: 550px;
  }
}
</style>
